<template>
  <div class="comment" @click.stop>
    <div class="avatar" v-if="showAvator">
      <img :src="QNURL + userStore.getUserInfo?.avatar" alt="" />
    </div>
    <div class="comment-content">
      <textarea
        :class="['textarea', isFocus ? 'textarea_focus' : '']"
        v-model="commentText"
        placeholder="评论内容"
        @focus="textFocusHandle"
      />
      <div class="op" v-show="isFocus">
        <div class="auxiliary">
          <!-- <svg class="auxiliary-icon icon" aria-hidden="true">
            <use xlink:href="#icon-biaoqing1" />
          </svg>
          <svg class="auxiliary-icon icon" aria-hidden="true">
            <use xlink:href="#icon-tupian-" />
          </svg> -->
        </div>
        <div class="btns">
          <button class="send-btn" @click="sendBtn">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { QNURL } from "@/config/urlConfig";

const userStore = useUserStoreHook();

const emit = defineEmits(["sendBtn"]);

defineProps({
  showAvator: {
    type: Boolean,
    default: false
  }
});

let commentText = ref("");
let isFocus = ref(false);

function sendBtn() {
  if (commentText.value.trim() === "") {
    return ElMessage.warning("评论内容不能为空");
  }
  emit("sendBtn", commentText.value);
  commentText.value = "";
}

const textFocusHandle = () => {
  isFocus.value = true;
};

const documentClickHandle = () => {
  isFocus.value = false;
};

onMounted(() => {
  document.addEventListener("click", documentClickHandle);
});

onBeforeUnmount(() => {
  document.removeEventListener("click", documentClickHandle);
});
</script>

<style lang="scss" scoped>
.comment {
  width: 100%;
  display: flex;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  &-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    .textarea_focus {
      height: 100px;
    }

    .textarea {
      width: 100%;
      min-height: 50px;
      border: none;
      background-color: #f1f2f3;
      border-radius: 5px;
      transition: all 200ms;
      resize: none;
      padding: 5px;
      font-size: 13px;
      font-weight: bold;

      &:focus,
      &:hover {
        outline: none;
        border: 1px solid var(--card-boder-hover-color);
        background-color: #eee;
        // height: 80px;
      }
    }

    .op {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
  }
}

.auxiliary {
  color: #999;

  &-icon {
    margin-right: 5px;
  }
}

.btns {
  .send-btn {
    width: 50px;
    height: 30px;
    border-radius: 3px;
    border: none;
    background-color: #00aeec;
    color: #fff;
    font-size: 12px;
  }
}
</style>
